<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件统计</title>
    <#include "../common.ftl">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<body>
<div class="layui-card">
    <div class="layui-card-body">
        <p style="font-size:14px;color: rgba(0,0,0,.45);">新增文件
            <span class="pull-right">
                                    <i class="ri-ghost-2-line ri-xl" style="vertical-align: -0.3em;"></i>
                                </span>
        </p>
        <p class="lay-big-font"><span style="font-size: 26px;line-height: 1;" id="total">12684</span>
        </p>
        <div style="height: 350px;" id="ECharts">

        </div>
    </div>
    <p style="padding: 10px 15px 0 15px;border-top: 1px solid #f0f0f0;">
        今日发布文件<span style="padding: 0 10px;" id="dayCount">782</span>
        <span style="margin-left: 20px;" id="rate">日同比 6% &nbsp;
                                <svg style="vertical-align: -0.5em;" xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24" width="24" height="24">
                                    <path fill="none" d="M0 0h24v24H0z" />
                                    <path d="M12 16l-6-6h12z" fill="rgba(47,204,113,1)" /></svg>
                            </span>
    </p>
</div>


<script src="${ctx.contextPath}/public/lib/echarts/echarts.min.js"></script>
<script src="${ctx.contextPath}/public/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

<script>
    var ECharts = echarts.init(document.getElementById('ECharts'));
    var option = {
        color: ['#60ABFC',],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            orient: 'horizontal',
            textStyle: {
                color: '#858FA6',
                fontFamily: 'Microsoft YAHei,serf'
            }
        },
        grid: {
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            containLabel: true
        },
        xAxis: {
            axisLabel: {
                show: false,
                color: '#858fa6'
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    width: 1,
                    color: '#E2E2E2'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 1,
                    color: '#E2E2E2'
                }
            }
        },
        yAxis: {
            data: [],
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    width: 1,
                    color: '#E2E2E2'
                }
            },
            axisLabel: {
                color: '#858fa6'
            },
            axisLine: {
                lineStyle: {
                    width: 0,
                    color: '#E2E2E2',
                    show: false
                }
            }
        },
        series: [{
            name: '数量',
            type: 'bar',
            barGap: 0,
            barWidth: '60%'
        }]
    };
    load(option);
    ECharts.setOption(option);

    function load(option){
        $.ajax({
            type: "post",
            async : false,
            url: ctx+"/file/statistic",
            data: {},
            success : function (res) {
                console.log(res);
                if(res.code==200){
                    res = res.obj;
                    var rate = "日同比"+" "+res.rate*100+"%"+" &nbsp;";
                    $('#rate').html(rate+"<svg style=\"vertical-align: -0.5em;\" xmlns=\"http://www.w3.org/2000/svg\"\n" +
                        "                                     viewBox=\"0 0 24 24\" width=\"24\" height=\"24\">\n" +
                        "                                    <path fill=\"none\" d=\"M0 0h24v24H0z\" />\n" +
                        "                                    <path d=\"M12 16l-6-6h12z\" fill=\"rgba(47,204,113,1)\" /></svg>")
                    $('#total').html(res.total)
                    $('#dayCount').html(res.dayCount)
                    option.legend.data = [];
                    option.xAxis.data = [];
                    for(let i = 0; i < res.time.length; i++) {
                        option.legend.data.push(res.time[i]);
                        option.xAxis.data.push(res.time[i]);
                    }
                    option.series[0].data = [];
                    for(let i = 0; i < res.num.length; i++) {
                        option.series[0].data.push(res.num[i]);
                    }
                }
            }
        })
    }
</script>
</body>
</html>